<template>
<div :class="[$style.container]">
  <div :class="[$style.body]">
    <ul :class="[$style.list]" v-infinite-scroll="onLoad" :infinite-scroll-disabled="disabled">
      <li :class="[$style.item]" v-for="(row, i) in pageData.rows" :key="i">
        <div :class="[$style.avatar]" :title="row.version">
          <color-avatar :size="32" shape="square" :text="String(row.version)"></color-avatar>
        </div>
        <div :class="[$style.content]">
          <div :class="[$style.label]">
            <span :class="[$style.text]" :title="row.creationByName">{{row.creationByName}}</span>
            <span :class="[$style.status]" v-if="i === 0"><el-tag size="mini" type="primary" effect="dark">最新</el-tag></span>
          </div>
          <div :class="[$style.description]">
            <span>{{row.creationTime}}</span>
            <span class="ml-2">{{row.type | transcode('doc_history_type')}}</span>
          </div>
          <div :class="[$style.tag]">
            <el-tag size="mini" type="primary" class="mr-2" effect="plain" v-for="(tag, i) in row.tags" :key="i">{{tag}}</el-tag>
          </div>
        </div>
        <div :class="[$style.action]">
          <el-dropdown trigger="click">
            <span><el-link :underline="false"><i class="el-icon-more"></i></el-link></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="onDownload(row)" v-if="canDownload">下载</el-dropdown-item>
              <el-dropdown-item @click.native="onRevision(row)" v-if="i > 0 && canEdit">设为最新</el-dropdown-item>
              <el-dropdown-item @click.native="onPreview(row)" v-if="canPreview">预览</el-dropdown-item>
              <el-dropdown-item @click.native="onTag(row)">标记</el-dropdown-item>
              <el-dropdown-item @click.native="onRemark(row)">备注</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </li>
    </ul>
    <empty-data v-if="!pageData.loading && pageData.rows.length < 1">暂无版本信息</empty-data>
    <div class="text-center my-2 text-secondary">
      <span v-if="pageData.loading">加载中...</span>
      <span v-if="!pageData.hasMore && !pageData.loading && pageData.rows.length > 0">没有更多了</span>
    </div>
  </div>
  <tag-update-modal ref="tagUpdateModal"></tag-update-modal>
  <remark-modal ref="remarkModal"></remark-modal>
</div>
</template>

<script lang="ts">

import { Vue, Component, Provide, Watch, Ref, Prop } from 'vue-property-decorator'
import TagUpdateModal from './tag-update-modal/index.vue'
import RemarkModal from './remark-modal/index.vue'
import { queryHistoriesByDoc, revision } from '@/api/doc-history'
import { PageData, PageQueryParams } from '@/config/page'
import { downloadFromUrl } from '@/utils/download'
import { hasPerm } from '@/config/acl'
import { canPreview } from '@/config/content-type'

@Component({
  components: { TagUpdateModal, RemarkModal }
})
export default class FileHistory extends Vue {
  @Ref() tagUpdateModal!: TagUpdateModal

  @Ref() remarkModal!: RemarkModal

  @Prop() data!: any

  pageData = new PageData(this.loader)

  get loader () {
    return (params: PageQueryParams) => {
      return queryHistoriesByDoc(this.data?.id, params)
    }
  }

  get disabled () {
    return this.pageData.loading || !this.pageData.hasMore
  }

  get canEdit () {
    return hasPerm('edit', this.data)
  }

  get canDownload () {
    return hasPerm('download', this.data)
  }

  get canPreview () {
    return this.data?.type === 'file' && hasPerm('preview', this.data) && canPreview(this.data?.name)
  }

  onLoad () {
    this.pageData.loadNext()
  }

  onRevision (row: any) {
    revision(row.id).then(() => {
      this.$message.success('设置最新版本成功')
      this.pageData.reload()
    })
  }

  onDownload (row: any) {
    const response = {
      'content-disposition': `attachment; filename=${encodeURIComponent(this.data?.name)}`
    }
    this.$oss.signatureUrl(row.url, { response }).then(url => {
      downloadFromUrl(url)
    })
  }

  onPreview (row: any) {
    window.open(`/preview/${this.data?.id}?versionId=${row.id}`)
  }

  onTag (row: any) {
    this.tagUpdateModal.open(row).then((tags) => {
      Object.assign(row, { tags })
      this.$message.success('更新标签成功')
    }).catch(() => {
      // ignore
    })
  }

  onRemark (row: any) {
    this.remarkModal.open(row).then((remark) => {
      Object.assign(row, { remark })
      this.$message.success('添加备注成功')
    }).catch(() => {
      // ignore
    })
  }

  created () {
    this.pageData.load({ prop: 'creationTime', order: 'desc' })
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {

}

.body {
  overflow: auto;
  height: calc(100vh - 48px - 40px - 64px);
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.item {
  display: flex;
  align-items: center;
  padding: 8px 8px;

  &:hover {
    background-color: $bg-body-color;
  }
}

.avatar {
  width: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 0 auto;
  align-self: flex-start;
}

.content {
  flex: 1 1 auto;
  margin: 0 8px;
}

.label {
  display: flex;
  width: 0;
  min-width: 100%;
}

.text {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.status {
  flex: 0 0 auto;
  margin-left: 8px;
}

.description {
  color: $text-secondary-color;
  font-size: 12px;
  margin-top: 4px;
}

.tag {
  margin-top: 4px;
}

.action {
  width: 24px;
  flex: 0 0 auto;
}
</style>
